<template>
  <el-card class="mr-20" shadow="never">
    <textarea class="w-full" @scroll="onScrolled" rows="35" readonly>{{logData}}</textarea>
  </el-card>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import axios from "axios"
const logData = ref('')
onMounted(() => {
  getData()
})
let scrollTop = 0, fetchingData = false, haveMoreData = true, i = 1, concatLine = "";

function onScrolled(event) {
  const nowScrollTop = event.target.scrollTop
  const scrollHeight = event.target.scrollHeight
  // console.log(nowScrollTop,scrollHeight)
  const offset = 1000;
  if(haveMoreData && nowScrollTop> scrollTop && !fetchingData && (nowScrollTop+offset) > scrollHeight){
    event.preventDefault();
    scrollTop = nowScrollTop;
    i++;
    fetchingData=true;
    getData(i)
  }
}

/**
 * 获取日志信息
 * @param pageNum
 */
function getData(pageNum=1) {
  axios.get(`/status/getSystemlogInfo?page=${pageNum}`).then(({data}) => {
    let buf;
    console.log('data', data)
    let response = data

    if(response.length>0){
      let arrResponse = response.split("\n").filter(function (value) {
        return value.length > 0;
      }).reverse();
      const lastLine = arrResponse[arrResponse.length - 1];
      const firstLine = arrResponse[0];
      arrResponse = arrResponse.slice(1,arrResponse.length-1)
      response = arrResponse.join("\n");
      buf = response;
      if(i>1){
        buf = logData.value +'\n'+ firstLine + concatLine +'\n'+buf;
      }else{
        buf = firstLine +'\n'+ buf;
      }
      logData.value = buf
      if(!Date.parse(lastLine.substr(0,15))){
        concatLine = lastLine;
      }else{
        concatLine = "\n" + lastLine;
      }
      fetchingData = false;
      haveMoreData = true;
    }else{
      haveMoreData = false;
      buf = logData.value;
      logData.value = buf + concatLine
    }
  })
}
</script>

<style scoped>

</style>